<template>
  <div class="l-from-body">
    <!--<el-alert class="l-from-el-alert" title="租户名称，先添加数据连接，与数据连接名称一样" type="warning"></el-alert>-->
    <el-form :model="formData" :rules="rules" size="mini" ref="form" label-width="88px">
      <el-form-item label="上级分类" prop="f_CategoryId">
        <el-col :span="24">
          <!--
						<el-select v-model="formData.f_CategoryId" placeholder="选择上级" clearable filterable>
						  <el-option v-for="(item,index) in apiArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
						-->
          <l-tree-select v-model="formData.f_CategoryId" :options="lr_apiTree(apiArr)"> </l-tree-select>
        </el-col>
      </el-form-item>

      <el-form-item label="报表名称" prop="f_Name">
        <el-col :span="24">
          <el-input v-model="formData.f_Name"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="数据接口" prop="apiUrl">
        <el-col :span="24">
          <el-input v-model="formData.apiUrl" @focus="apiDialog = true"></el-input>
        </el-col>
      </el-form-item>

      <!--
			<el-col :span="24">
			    <el-form-item label="报表文件" prop="f_SortCode">
			        <el-upload class="upload-demo" action="http://192.168.26.231:5000/report/uploadreportfile" :file-list="fileList" :limit="1" :data="uploadData">
			          <el-button size="small" type="primary">点击上传</el-button>
					  <div slot="tip" class="el-upload__tip">上传mrt报表文件，且只能上传一个，删除后再上传</div>
			        </el-upload>
			    </el-form-item>
			</el-col>
			-->

      <el-col :span="24">
        <el-form-item label="排序" prop="f_SortCode">
          <el-input v-model="formData.f_SortCode"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item label="报表描述" prop="f_Description">
          <el-input type="textarea" v-model="formData.f_Description"></el-input>
        </el-form-item>
      </el-col>
    </el-form>

    <!--对话框-->
    <l-dialog
      title="选择数据接口"
      :visible.sync="apiDialog"
      :width="1200"
      :height="600"
      @closed="hideApiForm"
      @ok="hideApiForm"
    >
      <api-form ref="apiForm" @childForm="childFormChange"></api-form>
    </l-dialog>
    <!--对话框 end-->
  </div>
</template>
<script>
const api = window.$api.report.reportcategory;
import apiForm from "./apiForm.vue";
export default {
  data() {
    return {
      ajaxTabIndex: 2,
      apiArr: [],
      formData: {
        f_Id: "",
        f_CategoryId: "",
        f_Name: "",
        f_Url: "",
        f_EnCode: "",
        f_EnabledMark: 1,
        f_Description: "",
        f_SortCode: 1,
        f_InterfaceId: "",
        apiUrl: "",
      },
      rules: {
        f_CategoryId: [{ required: true, message: "请选择上级分类" }],
        f_Name: [{ required: true, message: "请输入数据名称" }],
        apiUrl: [{ required: true, message: "请选择数据链接" }],
      },
      fileList: [],
      f_apiUrl: "",

      //接口数据
      apiDialog: false,
      apiTableData: [],
      columns: [
        { label: "接口名称", prop: "name", minWidth: "120" },
        { label: "接口连接", prop: "f_Url", minWidth: "240" },
        { label: "数据结构", prop: "Type", minWidth: "120" },
        { label: "数据类型", prop: "apiType", minWidth: "120" },
      ],
      dialogTypeVisible: false,
      dialogApiData: {},

      uploadData: { reportid: "28dd78b2b7c8469789cb39da1f99322d" },
    };
  },
  components: {
    apiForm,
  },
  computed: {},
  created() {
    var _this = this;

    api
      .getList()
      .then((res) => {
        res.data.data.forEach(function (v) {
          v.label = v.f_Name;
          v.value = v.f_Id;
        });
        var rows = _this.$deepClone(res.data.data);
        _this.apiArr = rows;
      })
      .catch(() => {});
  },
  methods: {
    lr_apiTree(data) {
      data = data || [];
      return this.$toTree(data, "f_Id", "f_ParentId", "f_Id", "f_Name");
    },

    resetForm() {
      //this.formData.f_Id = '';
      this.$refs.form && this.$refs.form.resetFields();
    },
    // 校验表单
    validateForm() {
      return this.$formValidateWraper(this.$refs.form);
    },
    setForm(data) {
      //console.log("设置表单：");
      //console.log(data);
      //console.log(data.f_ResponseType);
      this.formData = this.$deepClone(data);
    },
    getForm() {
      //console.log("获取表单：");
      let formData = this.$deepClone(this.formData);
      return formData;
    },

    //新增接口-弹窗
    showApiForm() {
      this.apiDialog = true;
    },
    hideApiForm() {
      this.apiDialog = false;
    },
    childFormChange(e) {
      this.apiDialog = false;
      this.apiDataSet(e.row);
    },
    apiDataSet(row) {
      this.apiDialog = false;
      this.dialogTypeVisible = true;
      this.dialogApiData = row;
      //console.log(row);
      this.formData.apiUrl = row.f_Url;
      this.formData.f_InterfaceId = row.f_Id;
    },
  },

  watch: {},
};
</script>
<style scoped>
.l-from-el-alert {
  margin-bottom: 20px;
}
.el-table .el-table__cell {
  padding: 2px 0;
}
.ui-jsonText-tipText {
  color: #f00;
}
</style>
<style>
.ui-jsonText-item {
  padding-top: 10px;
}
.ui-jsonText-item .el-textarea__inner {
  height: 120px;
}
</style>
